<template>
  <div class="progress-bar" :style="{height: height + 'px', width: width + 'px'}">
    <div class="progress-bar-fill" :style="{width: (width * (value || .01))  + 'px'}">
      <text class="progress-bar-fill-text" v-if="text">{{text}}</text>
    </div>
    <text class="progress-bar-bg-text" v-if="text && value < 100">{{text}}</text>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";

  .progress-bar {
    $height: 30px;
    background-color: lighten($color-primary, 40px);
    box-shadow:inset 0px 0px 10 rgba(0, 0, 0, 0.4);
    width: 400px;
    justify-content: center;
    display: flex;
    align-items: center;
    height: $height;
    border-radius: $height;
    position: relative;
    text-align: right;
    &-fill {
      background-image: linear-gradient(to right, $brand-primary, darken($brand-primary, 5));
      height: $height;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: absolute;
      border-radius: $height;
      top: 0;
      left: 0;
      overflow: hidden;
      text-align: right;
      &-text {
        font-size: 22px;
        color: #ffffff;
        width: 400px;
        text-align: right;
      }
    }
    &-bg-text {
      font-size: 22px;
      color: $color-primary;
      position: absolute;
      right: 10px;
      top: 0px;
    }
    margin-bottom: 20px;
  }
</style>
<script>

module.exports = {
  props: {
    height: {default: 30},
    width: {default: 400},
    value: {default: 0},
    text: {default: ''}
  },

  data () {
    return {}
  },
  components: {},
  created () {
  },
  methods: {}
}
</script>
